<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>上传下载</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card>
            <el-row :gutter="24"><!-- gutter是指定每个分栏的间隔 -->
<!--                 分栏一共占24格，给搜索框7格，添加按钮4格-->
                <el-col :span="7">
                    <!-- 搜索与添加区域 -->
<!--                    <div style="display: flex; align-items: center;">-->
<!--                      <el-input placeholder="请输入内容" clearable @clear="getUsers()" v-model="queryInfo.query" @keyup.enter="handleEnterKey"></el-input>-->
<!--                      <el-button type="primary" size="mini" @click="getUsers()">搜索</el-button>-->
<!--                    </div>-->
                </el-col>
            </el-row>
            <el-table v-loading="loading" :data="users" border stripe ><!-- 带边框、斑马纹 -->
              <el-table-column type="index"></el-table-column>
              <el-table-column label="操作" prop="movement"></el-table-column>
              <el-table-column label="修改人" prop="user"></el-table-column>
              <el-table-column label="修改时间" prop="time"></el-table-column>
              <el-table-column label="修改字段" prop="Modify_field"></el-table-column>
            </el-table>
          <!-- 分页区域 -->
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </el-card>
    </div>
</template>
<script>
import { defineComponent } from 'vue'
import {
  ElTable,
  ElTableColumn,
  ElButton,
  ElInput,
  ElMessage,
} from 'element-plus'
export default defineComponent({
  data() {
    return {
      editUserForm: {},
      editDialogVisible: false, //控制修改问题对话框的显示与隐藏
      restaurants: [],
      timeout:  null,
      loading:false,
      users: [],
      //所有角色的数据列表
      roleList: ['CDN','数据库'],
      //获取用户列表的参数对象
      queryInfo: {
        query: "",
        pagenum: 1, //当前的页数
        pagesize: 13, //每页的数量
      },
      total: 0,
      addDialogVisible: false, //控制添加用户对话框的显示与隐藏
      isViewPdf20: false,
      //添加用户的表单数据
      addForm: {},
      //修改表单的验证规则对象
      editUserFormRules: {
        type: [{required: true, message: '请输入问题类型', trigger: 'blur'}],
        problem: [{required: true, message: '请输入问题', trigger: 'blur'}],
        answer: [{required: true, message: '请输入答案', trigger: 'blur'}],
      },
      //添加表单的验证规则对象
      addFormRules: {
        type: [{required: true, message: '请输入问题类型', trigger: 'blur'}],
        problem: [{required: true, message: '请输入问题', trigger: 'blur'}],
        answer: [{required: true, message: '请输入答案', trigger: 'blur'}],
      }
    };
  },
  components: {
    ElTable,
    ElTableColumn,
  },
  methods: {
    // 获取所有用户
    async handleEnterKey() {
    // 当按下回车键时，触发搜索按钮的点击事件
      this.getUsers();
    },
    async getUsers() {
      this.loading = true
      try {
        const response = await this.$http.get('/history/', {
          params:this.queryInfo
      });
        this.loading = false
        if (response.status === 200) {
          this.users = response.data.results;
          this.total = response.data.total;
        }
        if (response.status === 201) {
          this.users = response.data.results;
          this.total = response.data.total;
          ElMessage.success(response.data.message);
        }
      } catch (error) {
        console.log(error);
        this.getUsers()
        // ElMessage.error('更新用户列表失败！');
      }
    },
    //监听 pagesize 改变的事件
    handleSizeChange(newSize){
      // console.log(newSize);
      this.queryInfo.pagesize = newSize;//重新指定每页数据量
      this.queryInfo.pagenum = 1;
      this.getUsers();//带着新的分页请求获取数据
    },
    //监听 页码值 改变的事件
    handleCurrentChange(newPage){
      // console.log(newPage);
      this.queryInfo.pagenum = newPage;//重新指定当前页
      this.getUsers();//带着新的分页请求获取数据
    },
    //监听添加用户对话框的关闭状态
    addDialogClosed(){
      this.$refs.addFormRef.resetFields();
    },
    //关闭编辑用户的对话框
    editDialogClosed(){
      this.$refs.editUserFormRef.resetFields();
    },
  },
  mounted() {
      this.getUsers()
    }
})
</script>

<style scoped>
.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
